<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>{{config('admin.title')}} | {{ trans('admin.login') }}</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.5 -->
  <!-- <link rel="stylesheet" href="{{ admin_asset("/vendor/laravel-admin/AdminLTE/bootstrap/css/bootstrap.min.css") }}"> -->
  <!-- Font Awesome -->
  <!-- <link rel="stylesheet" href="{{ admin_asset("/vendor/laravel-admin/font-awesome/css/font-awesome.min.css") }}"> -->
  <!-- Theme style -->
  <!-- <link rel="stylesheet" href="{{ admin_asset("/vendor/laravel-admin/AdminLTE/dist/css/AdminLTE.min.css") }}"> -->
  <!-- iCheck -->
  <!-- <link rel="stylesheet" href="{{ admin_asset("/vendor/laravel-admin/AdminLTE/plugins/iCheck/square/blue.css") }}"> -->

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <![endif]-->
  <!-- 
  <script src="//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  -->

  <style>
      * {
          margin: 0;
          padding: 0;
      }

      html,body {
        width: 100%;
          height: 100%;
          background-color: #001027;
          position: relative;
          background-repeat:no-repeat;
          font-family: "微软雅黑";
          background-position: left center;
          background-color:#001027;
          background-image:url(/images/bgimage.jpg);
      }

      .topLogo {
          float: left;
          margin-left: 5%;
          margin-top: 7%;
          height: 10%;
      }

      #loginBox {
          border-radius:8px;
          width: 460px;
          border: 4px solid #fff;
          background: #fff;
          float: right;
          margin-right: 20%;
          margin-top: 200px;
         
      }

      #loginBox .systemLogin {
          text-align: center;
      }

      .inputGroup {
          width: 80%;
          margin: 0 auto;
          background: #f7f7f7;
          height: 40px;
          margin-bottom: 26px;
      }

      #loginBox .systemLogin h3 {
          margin-top: 18px;
          font-size: 24px;
          font-weight: 500;
          margin-bottom: 40px;
      }
      #loginBox .systemLogin h4 {
          margin-bottom: 30px;
          font-size: 18px;
          font-weight: 500;
      }


      #loginBox .systemLogin img {
          width: 70px;
          margin-top: 40px;
              
      }

      #loginBox .inputGroup input {
          border: none;
          background: #f7f7f7;
          text-indent: 20px;
          height: 100%;
          width: 100%;
          outline: none;
          position: relative;
          top: 0;
          left: 0;
          -webkit-box-shadow: 0px 0px 0px 100px #f7f7f7 inset;
          line-height:40px;
      }

      #loginBox .inputGroup {
          position: relative;
      }

      #loginBox .inputGroup img {
          position: absolute;
         
          right: 9px;
       top: 9px;
      }

      #loginBox .rememberPassword {
          position: relative;
          font-size: 14px;
      }

      #loginBox .rememberPassword {
          width: 80%;
          margin: 0 auto;
          color: #999;
      }

      #loginBox .rememberPassword input[type='checkbox'] {
          width: 16px;
          height: 16px;
          position: relative;
          margin-right: 10px;
          top: 3px;
      }

      #loginBox .btnLogin {
          width: 80%;
          height: 52px;
          border: none;
          outline: none;
          color: #fff;
          text-align: center;
          margin-left: 10%;
          margin-top: 30px;
          margin-bottom: 80px;
          /* background: linear-gradient(to right, #240a78, #67c5e7); */
          background: url(/images/bgloginbtn.png) center;
          cursor: pointer;
          font-size: 18px;
          border-radius: 6px;
          background-size: 100%;
      }
      #loginBox .inputGroup label{
          color: red;
          position: relative;
          top: -5px;
          font-size: 14px;
          top: -9px;
      }
  </style>
</head>
<body>
    <a class="topLogo">
        <img src="{{ asset('images/toplogo.png') }}" alt="">
    </a>
    <div id="loginBox">
        <div class="systemLogin">
            <img src="{{ asset('images/logo.png') }}" alt="">
            <h3>云聚集管理系统</h3>
            <h4>孝乐OTT专区</h4>
        </div>
        <form action="{{ admin_base_path('auth/login') }}" method="post">
            <div class="inputGroup {!! !$errors->has('username') ?: 'has-error' !!}">
                <input type="text" id="userName" placeholder="{{ trans('admin.username') }}" name="username" value="{{ old('username') }}">
                <img src="{{ asset('images/name.png') }}" alt="">
                @if($errors->has('username'))
                  @foreach($errors->get('username') as $message)
                    <label class="control-label" for="inputError" style="color: red;"><i class="fa fa-times-circle-o"></i>{{$message}}</label></br>
                  @endforeach
                @endif
            </div>
            <div class="inputGroup {!! !$errors->has('password') ?: 'has-error' !!}">
                <input type="password" class="" id="userPass" placeholder="{{ trans('admin.password') }}" name="password">
                <img src="{{ asset('images/password.png') }}" alt="">
                @if($errors->has('password'))
                  @foreach($errors->get('password') as $message)
                    <label class="control-label" for="inputError" style="color: red;"><i class="fa fa-times-circle-o"></i>{{$message}}</label></br>
                  @endforeach
                @endif
            </div>
            <div id="message">
            </div>
            <input type="submit" class="btnLogin" id="btnLogin" onclick="userLogin()" value="{{ trans('admin.login') }}" >
            <input type="hidden" name="_token" value="{{ csrf_token() }}" >
        </form>
    </div>

<!-- jQuery 2.1.4 -->
<!-- <script src="{{ admin_asset("/vendor/laravel-admin/AdminLTE/plugins/jQuery/jQuery-2.1.4.min.js")}} "></script> -->
<!-- Bootstrap 3.3.5 -->
<!-- <script src="{{ admin_asset("/vendor/laravel-admin/AdminLTE/bootstrap/js/bootstrap.min.js")}}"></script> -->
<!-- iCheck -->
<!-- <script src="{{ admin_asset("/vendor/laravel-admin/AdminLTE/plugins/iCheck/icheck.min.js")}}"></script> -->
<script>
  // $(function () {
  //   $('input').iCheck({
  //     checkboxClass: 'icheckbox_square-blue',
  //     radioClass: 'iradio_square-blue',
  //     increaseArea: '20%' // optional
  //   });
  // });
</script>
</body>
</html>
